<template>
	<view :style="mix_diyStyle">
	<view class="main_graRe" :style="'background-image:url('+imgUrl+'graphic/graReBg.png)'">
    <!-- #ifndef H5 -->
		<topHeader :title="graTitle" @pop="popCon('open')" :topFixed="topFixed"></topHeader>
    <!-- #endif -->
		<view class="title_part">
			<view class="title_tag">
				  <svgGroup type="to_title" class="title_tag_img" width="131" height="50" px="rpx"
					   :color="diyStyle_var['--color_video_main']"></svgGroup>
				  <text class="title">{{$L('标题')}}</text>
			</view>
			<view class="title_wrap">
				<view class="top">
					<input class="input" :placeholder="$L('请输入名称，最多20字(必填)')"
						placeholder-style="font-size:26rpx;color:#949494;z-index:1,zoom:1" maxlength="20"
						v-model="title"></input>
				</view>
			</view>
		</view>

		<view class="pic_part">
			<view class="pic_part_title flex_row_start_center">
				  <svgGroup type="to_img" class="desc_title_img" width="37" height="37" px="rpx"
					   :color="diyStyle_var['--color_video_main']"></svgGroup>
				  <text class="title">{{$L('图片选择')}}</text>
			</view>
			<view class="pic_part_sel">
				<view class="cover_image" v-for="(item,index) in imageList" :key="index">
					<image :src="item.url" mode="" class="image" mode="aspectFit"></image>
					<image :src="closeImg" mode="" class="close_img" @click="delUploadImg(index)"></image>
				</view>
				<view class="cover" @tap="uploadCover" v-if="imageList.length<9">
					<image class="cover_icon" :src="imgUrl+'svideo/cover_icon.png'"></image>
					<text class="cover_tip">{{imageList.length}}/9({{$L('必填')}})</text>
				</view>
			</view>
		</view>

		<view class="desc_part">
			<view class="desc_title">
				  <svgGroup type="to_brief" class="desc_title_img" width="37" height="37" px="rpx"
					   :color="diyStyle_var['--color_video_main']"></svgGroup>
				  <text class="title">{{$L('图文简介')}}</text>
			</view>
			<textarea class="desc_con" :placeholder="$L('请输入简介，最多30字(必填)')"
				placeholder-style="font-size:26rpx;color:#949494;z-index:1,zoom:1" maxlength="30"
				v-model="desc"></textarea>
		</view>

		<view class="content_part">
			<view class="content_title">
				  <svgGroup type="to_text" class="desc_title_img" width="37" height="37" px="rpx"
					   :color="diyStyle_var['--color_video_main']"></svgGroup>
				  <text class="title">{{$L('正文内容')}}</text>
			</view>
			<textarea class="content_con" :placeholder="$L('请输入正文，最多500字(必填)~')"
				placeholder-style="font-size:26rpx;color:#949494;z-index:1,zoom:1;padding-left:12rpx"
				maxlength="500" v-model="content">
			</textarea>
		</view>

		<view class="avator">
			<view class="left">
				  <svgGroup type="to_label" class="desc_title_img" width="37" height="37" px="rpx"
					   :color="diyStyle_var['--color_video_main']"></svgGroup>
				  <text class="con">{{$L('添加标签')}}</text>
			</view>
			<view class="right">
				<picker class="con" range-key="labelName" @change="seleLabel" :range="label_list">
					<view class="picker">
						{{selectLabel.labelId != undefined &&
						selectLabel.labelId?selectLabel.labelName:$L('请选择标签(必填)')}}
					</view>
				</picker>
				<image class="arrow_r" :src="imgUrl+'svideo/mem_arrow_r.png'"></image>
			</view>
		</view>
		<!-- 是否添加报名按钮 -->
		<view class="isapply">
			<view class="box">
				<view class="title">
					是否开启预约按钮
				</view>
				<switch @change="applyfn" :checked="false" color="#fc1c1c" style="transform:scale(0.7)"/>
			
			</view>
			
		</view>
		<view class="avator" v-if="setting && setting.member_bind_goods=='1'"
			:style="selGoods.length > 0?'border-radius:15rpx 15rpx 0 0;margin-bottom:0':'border-radius:15rpx'">
			<view class="left">
				  <svgGroup type="to_shop" class="desc_title_img" width="37" height="37" px="rpx"
					   :color="diyStyle_var['--color_video_main']"></svgGroup>
				  <text class="con">{{$L('商品选择')}}</text>
			</view>
			<view class="right" @tap="seleGoods">
				<text v-if="selGoods.length == 0" class="con">{{setting.bind_goods_num > 0 ? $L('请选择,最多选择') +
					setting.bind_goods_num +$L('件商品(选填)') : $L('请选择商品')}}
				</text>
				<view v-if="selGoods.length > 0">
					<text class="text">{{$L('已选商品')}}：</text>
					<text class="text" style="color:var(--color_video_main)">{{selGoods.length}}</text>
					<text v-if="setting.bind_goods_num*1>0" class="text">/{{setting.bind_goods_num*1}}</text>
				</view>
				<image class="arrow_r" :src="imgUrl+'svideo/mem_arrow_r.png'"></image>
			</view>
		</view>
		<!-- 商品列表item -->
		<view class="live_user_tab_content">
			<videoReleaseGoods :goodsData="selGoods" :addCartIcon="imgUrl+'svideo/add_cart.png'"
				:eyeIcon="imgUrl+'svideo/eye.png'" @delGoods="delGoods" />
		</view>

		<view class="live_btn">
			<text v-if="title!=''&& (JSON.stringify(selectLabel) != '{}') && desc!= '' && content !='' && imageList.length>0"
				@tap="$frequentyleClick(startGraphic)" class="live_btn_text btn_enable">{{$L('发布')}}</text>
			<text v-else class="live_btn_text">{{$L('发布')}}</text>
		</view>

		<uni-popup ref="popBack" type="dialog">
			<uni-popup-dialog type="input" :title="$L('确定退出发布')" :content="$L('退出后编辑过的信息将不会保存')" :duration="2000"
				@confirm="popCon('confirm')">
			</uni-popup-dialog>
		</uni-popup>
	</view>
	</view>
</template>

<script>
	// #ifdef H5
	import EXIF from '@/utils/exif.js';
	// #endif
  import {
    	mapState,
    } from 'vuex';
	import topHeader from '../component/graphic/topheader.vue'
	import videoReleaseGoods from "../component/video/videoReleaseGoods.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			topHeader,
			videoReleaseGoods,
			uniPopup,
			uniPopupDialog
		},
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				video_id: '',
				title: '',
				imageList: [],
				imageSize: [], //图片对应的宽高
				desc: '',
				content: '',
				setting: {},
				label_list: [],
				roleType: 1, // 默认会员 1   2：商家
				selGoods: [], //已选中的商品列表
				selectLabel: {},
				closeImg: getApp().globalData.imgUrl + 'order-detail/guanbi.png',
				onOff: true,
				graTitle: '发布',
				index: null,  //当前操作的图文下标
				topFixed: false,
				firstOpen: true, //是否第一次加载页面
				storeId:null,
                token:'',
				attendOrNot:'2'
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
			this.getinfoauth()
			if(options.videoId){
				console.log(options.videoId);
				this.getvideinfoo(options.videoId)
			}
			if (this.$Route.query.video_id) {
				this.graTitle = this.$L('编辑')
				this.video_id = this.$Route.query.video_id;
				this.getVideoDetail();
			}
			this.roleType = this.$Route.query.roleType ? this.$Route.query.roleType : 1;
			this.storeId = this.$Route.query.storeId;
			this.index = this.$Route.query.index;
			uni.removeStorageSync('selGoods')
			if(this.firstOpen){
				this.initData();
			}
      // #ifdef H5
      setTimeout(()=>{
         uni.setNavigationBarTitle({
            title:this.graTitle
          })   
      },0);
      
      // #endif
	  if(options.id){
	  	// 获取素材详情
	  	this.getmerialinfo(options)
	  	options={}
	  }
		},
		onShow: function () {
			if(!this.firstOpen){
				this.initData();
			}else{
				this.firstOpen = false;
			}
		},

		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.topFixed = true
			} else {
				this.topFixed = false
			}
		},

		onBackPress() {
			this.$refs.popBack.open()
		},
    computed: {
      ...mapState(['userInfo','userCenterData'])
    },
		methods: {
			//  是否开启
			     applyfn(e){
				      if(e.detail.value){
						  // 开启
						  this.attendOrNot='1'
					  }else{
						  // 关闭
						  this.attendOrNot='2'
					  }
			   },
			// 查看素材详情
			getmerialinfo(val){
				this.$request({
					url:'/v3/system/seller/material/file/list',
					method:"GET",
					data:{fileId:val.id}
				}).then(res=>{
					if(res.data.list[0].fileType==2){
						this.video_flag='200'
						this.imageList.push({ url: res.data.fileUrl, path: res.data.filePath });
						this.imageSize.push({ width:res.data.width,height:res.data.height });
							
					}else{
						uni.showToast({
							title:'请选择视频素材'
						})
					}
					
				})
				
			},
			initData() {
				this.getLableList();
				this.getSetting();
			},
			//获取短视频详情
			getVideoDetail() {
				let {
					video_id
				} = this;

				let param = {};
				param.url = 'v3/video/front/video/detail';
				param.method = 'GET';
				param.data = {};
				param.data.videoId = video_id;
				this.$request(param).then(res => {
					if (res.state == 200) {
						let result = res.data;
						this.title = result.videoName;
						this.desc = result.introduction;
						// this.selectLabel.labelId = result.labelId;
						// this.selectLabel.labelName = result.labelName;
						result.videoImageUrl.forEach((item, index) => {
							this.imageList.push({
								url: item,
								path: result.videoImage.split(',')[index]
							})
						});
						if(res.data.imageInfo){
							this.imageSize = JSON.parse(res.data.imageInfo);
						}
						this.content = result.videoContent;
						this.selGoods = result.goodsList;
						uni.setStorageSync('selGoods', this.selGoods)
					}
				})
			},
			getinfoauth(){
			this.$request({
				url:'v3/seller/front/vendor/roles',
				method:"GET",
				data:{vendorMobile:this.userCenterData.memberMobile}
			}).then(res=>{
				 if(res.msg==2){
					 this.selectLabel.labelId = 10;
					 this.selectLabel.labelName = '我的';
				 }else if(res.msg==3){
					 this.selectLabel.labelId = 11;
					 this.selectLabel.labelName = '平台';
				 }
			 
			})	
			},
			//新增短视频查看详情
            getvideinfoo(val){
				let video_id=val
				let param = {};
				param.url = 'v3/video/front/video/detail';
				param.method = 'GET';
				param.data = {};
				param.data.videoId = video_id;
				this.$request(param).then(res => {
					if (res.state == 200) {
						let result = res.data;
						this.title = result.videoName;
						this.desc = result.introduction;
						// this.selectLabel.labelId = result.labelId;
						// this.selectLabel.labelName = result.labelName;
						result.videoImageUrl.forEach((item, index) => {
							this.imageList.push({
								url: item,
								path: result.videoImage.split(',')[index]
							})
						});
						if(res.data.imageInfo){
							this.imageSize = JSON.parse(res.data.imageInfo);
						}
						this.content = result.videoContent;
						this.selGoods = result.goodsList;
						uni.setStorageSync('selGoods', this.selGoods)
					}
				})
			},
			// 获取标签列表
			getLableList() {
				let param = {};
				param.url = 'v3/video/front/video/labelList';
				param.method = 'GET';
				this.$request(param).then(res => {
					if (res.state == 200) {
						this.label_list = res.data.list;
					}
				})
			},

			// 获取设置信息
			getSetting() {
				let param = {};
				param.url = 'v3/video/front/video/setting/getSettingList';
				param.method = 'GET';
				param.data = {};
				param.data.str = 'bind_goods_num,member_bind_goods';
				this.$request(param).then(res => {
					if (res.state == 200) {
						let result = res.data;
						result && result.map(settingItem => {
							if (settingItem.name == 'bind_goods_num') { //绑定商品数
								this.setting.bind_goods_num = settingItem.value
							} else if (settingItem.name == 'member_bind_goods') { //会员是否绑定商品
								this.setting.member_bind_goods = settingItem.value
								this.$forceUpdate()
							}
						})
					}
				})
			},

			//选择标签
			seleLabel(e) {
				this.selectLabel = this.label_list[e.detail.value];
			},

			// 选封面
			uploadCover() {
				let {
					cover
				} = this;
				let that = this;
        
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					//可选择原图或压缩后的图片
					success: res => {
						uni.showLoading();
						for (let index = 0; index < res.tempFilePaths.length; index++) {
							if (index + this.imageList.length == 9) {
								uni.hideLoading()
								uni.showToast({
									title: that.$L('最多上传9张图片！'),
									icon: 'none',
								})
								break;
							}
							
							uni.uploadFile({
								url: getApp().globalData.apiUrl + 'v3/oss/front/upload',
								filePath: res.tempFilePaths[index],
								name: 'file',
								formData: {
									'source': 'goods',
								},
                header: {
                    Authorization:  'Bearer '+that.userInfo.access_token
                 },
								success: (uploadFileRes) => {
									let result = JSON.parse(uploadFileRes.data);
									if (result.state == 200) {
										this.imageList.push({ url: result.data.url, path: result.data.path });
										this.imageSize.push({ width:result.data.width,height:result.data.height });
										// #ifdef H5
										/** setSize方法 处理部分机型像素过高时图片旋转导致的宽高值不正确问题 */
										this.setSize(this.imageList.length-1,res.tempFilePaths[index]);
										// #endif
									}
								},
								complete: () => {
									uni.hideLoading();
								}
							});
						}
					}
				});
			},
			
			// #ifdef H5
			async setSize(index,url) {
			    let Orientation = 0; // 0: 正常无旋转 1: 横屏拍摄 6:竖屏拍摄照片旋转
			    //获取图片META信息
				await this.getImageTag(url, 'Orientation', function(e) {  
					if(e != undefined) Orientation = e;  
			    })
				if(Orientation > 1){ //竖屏拍照时照片旋转的话则图片的宽高值互换
					let w = this.imageSize[index].width;
					let h = this.imageSize[index].height;
					this.imageSize[index].width = h;
					this.imageSize[index].height = w;
				}
			},
			getImageTag(file, tag, suc){  
				 if (!file) return 0;
				 return new Promise((resolve, reject) => {  
					 /* eslint-disable func-names */  
					 // 箭头函数会修改this，所以这里不能用箭头函数
					 let imgObj = new Image();
					 imgObj.src = file
					 uni.getImageInfo({  
						 src: file,
						 success(res) {
							 EXIF.getData(imgObj, function () {
								 EXIF.getAllTags(this);
								 let or = EXIF.getTag(this,'Orientation');
								 resolve(suc(or))
							 });  
						 }  
					 })  
				 }); 
			},
			// #endif
			
			// 删除评价图片
			delUploadImg(index, product) {
				this.imageList.splice(index, 1);
				this.imageSize.splice(index, 1);
			},

			//选择商品
			seleGoods() {
				this.$Router.push({ 
					path: '/extra/svideo/svideoSeleGoods', 
					query: { 
						bindGoodsNum: this.setting.bind_goods_num, 
						selGoods: JSON.stringify(this.selGoods),
					} ,
				})
			},

			//发布
			startGraphic() {
				let {
					title,
					desc,
					content,
					imageList,
					imageSize,
					selectLabel,
					video_id
				} = this;

				if (title.trim() == '') {
					uni.showToast({
						title: this.$L('请输入标题'),
						icon: 'none'
					});
					return;
				}

				if (imageList.length == 0) {
					uni.showToast({
						title: this.$L('请选择上传图片'),
						icon: 'none'
					});
					return;
				}

				if (desc == '') {
					uni.showToast({
						title: this.$L('请输入图文简介'),
						icon: 'none'
					});
					return;
				}

				if (content == '') {
					uni.showToast({
						title: this.$L('请输入正文内容'),
						icon: 'none'
					});
					return;
				}

				if (JSON.stringify(selectLabel) == '{}') {
					uni.showToast({
						title: this.$L('请选择图文标签'),
						icon: 'none'
					});
					return;
				}
				let param = {}
				param.data = {};
				param.method = 'POST';
				let selGoodsIds = [];
				this.selGoods.map(selGoodsItem => {
					if (video_id != '') {
						selGoodsIds.push(selGoodsItem.goodsId)
					} else {
						if (selGoodsItem.isSel == true) {
							selGoodsIds.push(selGoodsItem.goodsId)
						}
					}
				})
				let selImagePath = imageList.map(i => i.path)
				param.data = {
					introduction: desc,
					// labelId: selectLabel.labelId,
					videoName: title,
					content,
					videoImage: selImagePath.join(','),
					goodsIds: selGoodsIds.join(','),
					type: 2,
					width: imageSize[0].width,
					height: imageSize[0].height,
					imageInfo: JSON.stringify(imageSize),
					attendOrNot:this.attendOrNot
				};
				
				if (video_id != '') {
					param.url = 'v3/video/front/video/editVideo';
					param.data.videoId = video_id;
				} else {
					param.url = 'v3/video/front/video/releaseVideo';
				}
				 param.data.labelId=this.selectLabel.labelId
				this.$request(param).then(res => {
					if (res.state == 200) {

						// if(this.video_id){
						// 	// 编辑成功则修改图文列表当前项的审核状态
						// 	uni.$emit('updateState',this.index)
						// }

						uni.showToast({
							title: this.video_id ? this.$L('编辑成功！') : this.$L('发布成功！'),
							icon: 'none',
							duration: 1000
						})

						let pages = getCurrentPages();
						let flag = true;
						let preIndex = '';
						pages.forEach((item, index) => {	// 处理返回列表页 后退跳转层级重复问题
							if (item.route == "extra/user/my") {
								if (!preIndex) {
									preIndex = index;
								}
							} else if (item.route == "extra/graphic/graphicRelease") {
								flag = false;
								setTimeout(() => {
									uni.$emit('updateState')
									this.$Router.back(index - preIndex)
								}, 1000)
							}
						})
						if (flag) {
							let prevPage = pages[pages.length - 2]; //上一个页面
							if (prevPage) {
								prevPage.$vm.initData();
							}
							setTimeout(() => {
								uni.$emit('updateState')
								this.$Router.back(1)
							}, 1000)
						}
					} else {
						this.$api.msg(res.msg);
					}
				})
			},

			//删除商品
			delGoods(options) {
				this.selGoods.map((item, index) => {
					let pid = item.productId || item.defaultProductId
					if (pid == options.productId) {
						this.selGoods.splice(index, 1)
					}
				})
				uni.setStorageSync('selGoods', this.selGoods)
			},

			popCon(type) {
				let obj = [
					'title',
					"imageList",
					"desc",
					"content",
					"selGoods",
					"selectLabel",
				]

				let res = obj.some(item => Boolean(this[item].length && JSON.stringify(this[item]) != '{}' && this[item]))

				switch (type) {
					case 'open': {
						if (res) {
							this.$refs.popBack.open()
						} else {
							this.$Router.back(1)
						}

						break
					}
					case 'confirm': {
						this.$Router.back(1)
						break
					}
				}
			}
		}

	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.main_graRe {
		padding-top: 52rpx;
		/* #ifdef APP-PLUS||MP-WEIXIN */
		padding-top: calc(var(--status-bar-height) + 44rpx);
		/* #endif */
		width: 100%;
		margin: 0;
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: contain;
		padding-bottom: env(safe-area-inset-bottom);

		.title_part {
			padding: 0 20rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 15px 0px rgba(86, 86, 86, 0.1);
			margin: 20rpx;
			border-radius: 15rpx;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			box-sizing: content-box;

			.title_tag {
				width: 131rpx;
				height: 50rpx;
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: center;
				margin-left: -32rpx;
        position: relative;
        .title_tag_img{
          position: absolute;
          left: 0;
          top: 0;
        }
				.title {
					font-size: 32rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					line-height: 40rpx;
          position: relative;
				}
			}

			.title_wrap {
				width: 100%;
				height: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;

				.top {
					width: 100%;
					margin-top: 20rpx;
					margin-bottom: 20rpx;

					textarea {
						width: 100%;
						padding-left: 11rpx;
						color: #2D2D2D;
						font-size: 30rpx;
					}
				}
			}
		}



		.pic_part {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;

			background: #fff;
			border-radius: 15rpx;
			margin: 0 20rpx;
			box-sizing: border-box;
			padding: 20rpx 0 20rpx 20rpx;

			.pic_part_title {
				display: flex;
				align-items: center;

				.title {
					color: #2D2D2D;
					font-size: 30rpx;
				}
			}

			.pic_part_sel {
				margin-top: 26rpx;
				display: flex;
				overflow: auto;
				width: 100%;

				.cover {
					width: 125rpx;
					height: 125rpx;
					background: rgba(238, 238, 238, 1);
					border-radius: 15rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					position: relative;
					flex-shrink: 0;

					.cover_icon {
						width: 40rpx;
						height: 40rpx;
					}

					.cover_tip {
						font-size: 22rpx;
						color: #949494;
						margin-top: 10rpx;
					}
				}

				.cover_image {
					position: relative;
					margin-right: 20rpx;

					.image {
						width: 125rpx;
						height: 125rpx;
						border-radius: 15rpx;
					}

					.close_img {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						right: -10rpx;
						top: 0rpx;
						z-index: 99;
					}
				}
			}
		}

		.desc_part {
			background: #fff;
			border-radius: 15rpx;
			margin: 26rpx 20rpx;
			box-sizing: border-box;
			padding: 20rpx;

			.desc_title {
				display: flex;
				align-items: center;

				.title {
					color: #2D2D2D;
					font-size: 32rpx;
				}
			}

			.desc_con {
				color: #949494;
				font-size: 28rpx;
				line-height: 32rpx;
				margin-top: 10rpx;
				width: 100%;
				padding-left: 12rpx;
				height: 80rpx;
			}
		}

		.content_part {
			background: #fff;
			border-radius: 15rpx;
			margin: 26rpx 20rpx;
			box-sizing: border-box;
			padding: 20rpx;

			.content_title {
				display: flex;
				align-items: center;

				.title {
					color: #2D2D2D;
					font-size: 32rpx;
				}
			}

			.content_con {
				margin-top: 20rpx;
				padding-left: 20rpx;
				font-size: 28rpx;
				line-height: 32rpx;
				width: 100%;
			}
		}
.isapply{
		padding: 10rpx 20rpx;
		.box{
			width: 710rpx;
			padding: 20rpx 10rpx;
			border-radius: 10rpx;
			background-color: #fff;
			color: #2d2d2d;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			.nobtn,.yesbtn{
				padding: 10rpx 20rpx;
				background-color: #fc1c1c;
				color: #fff;
				font-size: 24rpx;
				border-radius:20rpx;
			}
		}
	}
		.avator {
			background: #fff;
			// width: 710rpx;
			padding: 20rpx 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin: 26rpx 20rpx;
			border-radius: 15rpx;

			.left {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				.con {
					color: #2d2d2d;
					font-size: 32rpx;
				}

				.icon {
					width: 47rpx;
					height: 47rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				height: 100%;
				overflow: hidden;

				.con {
					color: #949494;
					font-size: 24rpx;
					text-align: right;
				}

				.text {
					color: #2d2d2d;
					font-size: 24rpx;
					text-align: right;
				}

				.img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
					overflow: hidden;
				}

				.arrow_r {
					width: 40rpx;
					height: 42rpx;
					margin-left: 6rpx;
				}
			}
		}

		.live_btn {
			margin-top: 10rpx;
			height: 100rpx;

			.btn_enable {
				background: var(--color_video_main_bg) !important;
				box-shadow: 0px 3px 10px 0px var(--color_video_halo);
			}

			.live_btn_text {
				font-size: 34rpx;
				font-weight: bold;
				color: #fff;
				line-height: 32rpx;
				width: 680rpx;
				height: 70rpx;
				background: #aaa;
				border-radius: 35rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin: 26rpx auto;
			}
		}

		.live_user_tab_content {
			max-height: 900rpx;
			overflow: auto;
		}
	}
</style>